﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link th:href="@{/front-resource/css/style.css}" type="text/css" rel="stylesheet" />
<link th:href="@{/front-resource/css/app.css}" type="text/css" rel="stylesheet" />
<!-- Favicon -->
<!-- Favicon and Touch Icons -->
<link th:href="@{/front-resource/images/favicon.png}" rel="shortcut icon" type="image/png">
<link th:href="@{/front-resource/images/apple-touch-icon.png}" rel="apple-touch-icon">
<link th:href="@{/front-resource/images/apple-touch-icon-72x72.png}" rel="apple-touch-icon" sizes="72x72">
<link th:href="@{/front-resource/images/apple-touch-icon-114x114.png}" rel="apple-touch-icon" sizes="114x114">
<link th:href="@{/front-resource/images/apple-touch-icon-144x144.png}" rel="apple-touch-icon" sizes="144x144">
<title>酒店订单</title>
</head>
<body>
<!-- Start Main Menu Area -->
<div th:replace="/common/frontCommon::header"></div>
<!-- End Main Menu Area -->

<section class="breadcromb-top section_100">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ol class="text-white justify-content-center no-border mb-0">
          <li class="breadcrumb-item"><a href="index.html"></a></li>
        </ol>
        <div class="breadcromb-box">
          <h3>用户订单列表</h3>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="booking-section bg-dark pt80 pb80 admin-page">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-xs-12">
				<div class="dashboard-list-box">
					<div class="list-sort">
						<div class="sort-left">我的订单</div>
						<a href="/frontOrders/history" class="btn btn-primary sort-right" style="margin-top: 20px;">历史订单</a>
					</div>
					<div class="single-list" th:each="order:${order}">
						<div class="media booking-list-media">
							<a th:href="'/frontOrders/selectByOrderId?id='+${order.orderId}">
								<div class="media-left">
									<img th:src="@{${order.hotelName}==null?'/hand-insert-img/hotel-not-found.jpg':'/img/hotel/'+${order.imageName}}" alt="图片未能找到" style="height: 112px;width: 112px;">
								</div>
								<div class="media-body">
									<div class="booking-list">
										<span style="color: #ffffff;" class="highlight bg-warning" th:if="${order.orderStatus}==0">未支付</span>
										<span style="background: #2196f3;color: #ffffff;" class="highlight" th:if="${order.orderStatus}==1">已支付</span>
									</div>
									<div class="booking-list">酒店名称: <span th:text="${order.orderHotel}"></span></div>
									<div class="booking-list">房间类型: <span th:text="${order.orderRoom}"></span></div>
									<div class="booking-list ">下单时间: <span class="highlight bg-success"  th:text="${#dates.format(order.orderTime,'yyyy-MM-dd HH:mm:ss')}"></span></div>
									<div class="booking-list" th:if="${order.orderStatus}==1"> 支付金额: <span class="highlight bg-success"  th:text="${order.orderPrize}+'元'"></span></div>
								</div>
							</a>
							<div class="right-btn">
								<a th:if="${order.orderStatus}==0" th:href="'/index/toPay?orderId='+${order.orderId}" class="btn btn-primary">去支付</a>
								<a th:href="'/frontOrders/selectByOrderId?id='+${order.orderId}" class="btn btn-primary approved">查看详情</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<div th:replace="/common/frontCommon::footer"></div>

<!-- Optional JavaScript --> 
<!-- jQuery first, then Popper.js, then Bootstrap JS --> 
<script th:src="@{/front-resource/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/popper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/getfund-nav.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/owl.carousel.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/waypoints.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/jquery.counterup.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/custom.js}" type="text/javascript"></script>
<script>
</script>
</body>
</html>